import React from 'react'
import { changeNav } from '../actions'
import { gosmartdr,getexample } from '../actions/smartDr.js'
import { connect } from 'react-redux'
import CSSModules from 'react-css-modules'
import styles from './appPage/smartdr/smartDr.less'
import hhistory from '../history'
import { WingBlank,WhiteSpace,List,Flex,Button,ActivityIndicator,Icon } from 'antd-mobile'
import { ajaxGet } from '../common/wxajaxservice.js'

const Item = List.Item;
const Brief = Item.Brief;

@CSSModules(styles, { allowMultiple: true })
class SmartDr extends React.Component{
    constructor(props) {
        super(props);
        this.state = {detail: {}};
    }
	componentDidMount(){
		this.props.tochangeNav({title:"智慧餐厅"});
		console.log(this.props.params)
		let that = this;
		ajaxGet( "bd/product/detail/"+ this.props.params.type ).then( res=> {console.log(res) ;that.setState({detail:res})} );

	}
	render(){
		const detail = this.state.detail.data;
		console.log(this.state.detail.data)
		if(detail){
		return(
			<div>
				<WhiteSpace />
				<div styleName="smartdrbg">
					<div styleName="smartdr smartdrleft">
						<img src={detail.productLogo} alt=""/>
					</div>
					<div styleName="smartdr smartdrright">
						<h4 styleName='smartdr-title'>{detail.productName}</h4>
						<p styleName="smartdr-desc">{detail.productDigest}</p>
						{/*<p styleName="smartdr-twofee">*/}
							{/*服务费（服务费）<span>&yen;{parseInt(detail.serviceFee).toFixed(2)}</span>*/}
						{/*</p>*/}
						{/*<p styleName="smartdr-twofee">*/}
							{/*开通费（每店）<span>&yen;{parseInt(detail.activationFee).toFixed(2)}</span>*/}
						{/*</p>*/}
					</div>
				</div>
				
				<div style={{ background:"#fff" }}>
					<Flex style={{borderTop:'0.02rem solid #f7f7f7'}}>
						<Flex.Item style={{textAlign:'center'}}>
							<Icon style={{marginBottom:'-0.1rem',marginRight:'0.12rem'}} type={require( './../components/assets/ic_group_huang.svg' )} />
							<span styleName="smartdr-common">已开通集团：</span><span styleName="smartdr-common smartdr-orange" style={{ paddingRight:"30px" }}>{detail.openedGroupNum}</span>
						</Flex.Item>
						<Flex.Item style={{textAlign:'center'}}>
							<Icon  style={{marginBottom:'-0.1rem',marginRight:'0.12rem'}} type={require( './../components/assets/ic_mendian.svg' )} />
							<span styleName="smartdr-common">已开通门店：</span><span styleName="smartdr-common smartdr-orange">{detail.openedStoreNum}</span>
						</Flex.Item>
					</Flex>
				</div>
				<WhiteSpace />
                {/*<List className="my-list">*/}
			        {/*<Item extra={'1 年'}>购买时长</Item>*/}
			    {/*</List>*/}
			    {/*<WhiteSpace />*/}
				<List className="my-list">
			    	<div style={{minHeight:'5rem',padding:'0.15rem',color:'#666',fontSize:'0.3rem',lineHeight:'0.4rem'}}>{detail.productDetailDesc}</div>
			    </List>
				<div style={{backgroundColor:'#fff',padding:'0.4rem'}}>
				    <Flex >
				      <Flex.Item>
				      	<Button style={{fontSize:'0.32rem',lineHeight: '0.88rem'}} type="ghost"
				      	onClick={ ()=>{ hhistory.push('/AoTenant') } }>查看已开通商户</Button>
				      </Flex.Item>
				      <Flex.Item>
				      	<Button style={{fontSize:'0.32rem',lineHeight: '0.88rem'}} type="primary"
				      	onClick={ ()=>{ hhistory.push('/openSmartdr') } }>新开通商户</Button>
				      </Flex.Item>
				    </Flex>
					{/*<Button type="primary" */}
				      	{/*onClick={*/}
							  {/*()=>{*/}
								{/*this.props.gosmartdr()*/}
							  {/*}*/}
						  {/*}>测试</Button>*/}
					{/*<Button type="primary" */}
				      	{/*onClick={*/}
							  {/*()=>{*/}
								{/*this.props.getexample()*/}
							  {/*}*/}
						  {/*}>测试请求接口</Button>*/}
					{/*<Button type="primary" */}
				      	{/*onClick={*/}
							  {/*()=>{*/}
								{/*ajaxGet( "bd/product" ).then( res=>console.log(res) )*/}
							  {/*}*/}
						  {/*}>测试直接调接口</Button>*/}
				</div>
			</div>
		)}else{
			return(
				<div style={{textAlign: 'center',background: 'rgba(0,0,0,0.05)',
                    borderRadius: "4px",
                    marginBottom: '20px',
                    padding: '30px 50px',
                    margin: '20px 0'}}>
					<ActivityIndicator/>
				</div>
			)
		}
	}
}

const mapStateToProps = () => ({
	
})

const mapDispatchToProps = ( dispatch ) => {
	return{
		tochangeNav:navobj => dispatch( changeNav( navobj ) ),
		gosmartdr:() => dispatch( gosmartdr() ),
		getexample:() => dispatch( getexample() )
	}
}

export default connect( mapStateToProps,mapDispatchToProps )( SmartDr )